<template>
  <view class="hire_page">
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left" style="background-color: #4C91FA;">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;color: #FFFFFF;">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;">
          <image style="width: 48rpx;height: 48rpx;"
            src="https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png" mode="" />
        </view>
        签订合同
      </view>
    </view>
    <view class="top_bg">
      <view style="background-color: rgb(76,145,250);">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="_w-max" style="height: 96rpx;"></view>
        <view style="height: 72rpx;"></view>
      </view>
      <view style="height: 384rpx;background: linear-gradient( 180deg, rgb(76,145,250) 0%, #F5F5F5 100%);"></view>
    </view>
    <view :style="{ width: '100%', height: recHeight }"></view>
    <view class="_w-max h_96" style="height: 96rpx;"></view>
    <view class="container-t">
      <view class="container_top">
        <image class="hire_liucheng"
          src="https://taxi.raxan.xyz/wechat/static/images/23f8b7b722e17c9fd085d408a7bd420.png" />
      </view>

      <view class="container">
        <view class="list">
          <view class="multi-item">
            <view class="multi-text-child">
              <view class="title">企业认证 <text @click="handleClickGetComInfo"
                  style="font-size: 24rpx; color: #4C91FA;padding-left: 12rpx;"
                  v-if="company_contact.status===1">您有已认证的企业，点击带入数据</text> </view>
              <view class="desc">请填写企业联系信息</view>
            </view>
            <view class="multi-item-child">
           
              <view style="flex-shrink: 0;"> 姓名</view>
              <view class="content">
                <input class="uni-input text" placeholder="填写真实姓名" :disabled="isDR" v-model="legal_person" />
              </view>
            </view>
            <view class="multi-item-child">
             
              <view style="flex-shrink: 0;">  电话</view>
              <view class="content">
                <input type="tel" class="uni-input text" placeholder="填写电话" :disabled="isDR" v-model="legal_phone" />
              </view>
            </view>
            <view class="multi-item-child">
               <view style="flex-shrink: 0;">  地址</view>
              
              <view class="content">
                <input type="tel" class="uni-input text" placeholder="填写地址" :disabled="isDR" v-model="cityName" />
              </view>
            </view>
            <view class="multi-item-child">
               <view style="flex-shrink: 0;">  公司名称</view>
              
              <view class="content">
                <input type="text" class="uni-input text" placeholder="填写公司名称" :disabled="isDR"
                  v-model="company_name" />
              </view>
            </view>
            <view class="multi-item-child">
               <view style="flex-shrink: 0;">  统一社会信用代码</view>
              
              <view class="content">
                <input type="text" class="uni-input text" placeholder="填写公司名称" :disabled="isDR" v-model="credit_code" />
              </view>
            </view>

          </view>
        </view>
        <view class="auth-item-box idcard-box">
          <view class="title">法人身份证</view>
          <view class="desc">请确保证件边框完成、字体清晰、亮度均匀</view>
          <image class="auth-img1" :src="legal_card_a ? legal_card_a : './static/auth_img1.png'"
            @click="upLoadImg('legal_card_a')"></image>
          <image class="auth-img2" :src="legal_card_b ? legal_card_b : './static/auth_img2.png'"
            @click="upLoadImg('legal_card_b')"></image>
        </view>
        <view class="auth-item-box">
          <view class="title">公司营业执照</view>
          <image class="auth-img3" :src="license_pic ? license_pic : './static/auth_img3.png'"
            @click="upLoadImg('license_pic')"></image>
        </view>
        <view class="auth-item-box">
          <view class="title">实际经营场地照片</view>
          <image class="auth-img3" :src="store_pic ? store_pic : './static/auth_img4.png'"
            @click="upLoadImg('store_pic')"></image>
        </view>
        <!-- <view class="auth-item-box">
          <view class="title">资质证书</view>
          <image class="auth-img3" :src="certificate_pic ? certificate_pic : './static/auth_img5.png'"
            @click="upLoadImg('certificate_pic')"></image>
        </view> -->
        <view class="operate-box" @tap="submit">下一步</view>
      </view>
    </view>
    <uni-popup ref="popup" background-color="#fff" borderRadius="24rpx  24rpx 0rpx  0rpx">
      <scroll-view scroll-y="true" style="height: calc(100vh - 412rpx);">
        <view style="padding: 48rpx 32rpx;">
          <rich-text :nodes="introduce"></rich-text>
        </view>
        <view style="padding: 8rpx 32rpx; border-top: 1rpx solid  #E7E7E7;box-sizing: border-box;">
          <view class="btn" style="position: fixed;" @click="changeRead">我已阅读</view>
        </view>
      </scroll-view>
    </uni-popup>
    <!-- <view class="btn" style="position: fixed;" @click="submit">下一步</view> -->
  </view>
</template>

<script>
  import {
    getCity
  } from '@/api/api.js';
  import {
    getContactInfo,
    viewContract,
    authSign
  } from '@/api/car.js';
  import {
    carAuth
  } from '@/api/info_setting.js';
  import {
    getUserInfo
  } from '@/api/user.js';
  const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name
  const IMAGES = {
    BANNER: concat('banner.png'),
    CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png',
    ARROW_RIGHT: concat('arrow_right.png'),
  }


  export default {
    data() {
      return {
        recHeight: 0,
        // 企业1 个人0
        value: 0,
        imgs: IMAGES,
        value: 0,
        id: '',
        orderId: '',
        type: '',
        multiIndex: [0, 0, 0],
        valueRegion: [0, 0, 0],
        multiArray: [],
        district: [],
        cityId: 0,
        cityName: '',
        company_name: '',
        region: [this.$t(`省`), this.$t(`市`), this.$t(`区`)],
        legal_person: '',
        legal_phone: '',
        legal_card_a: '',
        legal_card_b: '',
        license_pic: '',
        store_pic: '',
        certificate_pic: '',
        company_contact_id: 0,
        credit_code: '',
        contactInfo: {},
        company_contact: {
          status: 0
        },
        isDR: false,
        isRead: false,
        introduce: ''
      }
    },
    onLoad(options) {
      this.id = options.id;
      this.orderId = options.order_id;
      this.type = options.type;
      this.getPhoneInfo();
      this.getUserInfo()
      // this.viewContract()
    },
    methods: {
      back(){
        uni.navigateBack()
      },
      changeRead() {
        this.isRead = true;
        this.closeVehConfig();

        uni.navigateTo({
          url: '/pages/myCar/uploadHt?type=' + this.type + '&id=' + this.id
        })
      },
      viewContract() {
        viewContract({
          type: this.type,
          id: this.id
        }).then(res => {
          this.introduce = res?.data?.content
           this.$refs.popup.open('bottom');
        })
      },
      openVehConfig() {
        this.$refs.popup.open('bottom');
      },
      closeVehConfig() {
        this.$refs.popup.close();
      },
      getUserInfo() {
        getUserInfo().then((res) => {
          this.company_contact = res.data.company_contact
          // console.log(res.data.company_contact)
          // this.userInfo = res.data;
        }).catch((err) => {
          uni.showToast({
            title: '用户信息获取失败',
            icon: 'none'
          })
        })
      },
      // 获取顶部高度信息
      getPhoneInfo() {
        uni.getSystemInfo({
          success: (res) => {
            this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
          }
        });
      },
      radioChange(e) {
        const value = e.detail.value
        this.value = +value
      },
      submit() {
        this.onSumbmit()
      },
      handleClickGetComInfo() {
        // this.isDR = true
        this.getContactInfo()
      },
      // 获取驾驶员详情
      getContactInfo() {
        var that = this;
        getContactInfo({
          contact_id: that.company_contact.contact_id
        }).then(res => {
          console.log('res-----.', res)
          this.contactInfo = res.data;
          let {
            legal_person,
            legal_phone,
            legal_card_a,
            legal_card_b,
            license_pic,
            store_pic,
            certificate_pic,
            credit_code,
            company_name
          } = res.data
          this.legal_person = legal_person;
          this.legal_phone = legal_phone;
          this.legal_card_a = legal_card_a;
          this.legal_card_b = legal_card_b;
          this.license_pic = license_pic;
          this.store_pic = store_pic;
          this.certificate_pic = certificate_pic;
          this.cityName = res.data.default;
          this.company_name = res.data.company_name
          this.credit_code = res.data.credit_code
        })
      },
      //上传身份证正面照片等
      upLoadImg: function(field) {
        if (this.isDR) return
        this.$util.uploadImageOne('upload/image', (res) => {
          this[field] = res.data.url;
        });
      },
      onSumbmit() {
        let {
          legal_person,
          legal_phone,
          region,
          legal_card_a,
          legal_card_b,
          license_pic,
          store_pic,
          certificate_pic,
          company_contact_id,
          cityName,
          credit_code,
          company_name
        } = this
        if (!legal_person) {
          uni.showToast({
            icon: 'none',
            title: '请填写真实姓名'
          })
          return;
        }
        if (!legal_phone) {
          uni.showToast({
            icon: 'none',
            title: '请填写电话'
          })
          return;
        }

        if (!cityName) {
          uni.showToast({
            icon: 'none',
            title: '请填写地址'
          })
          return;
        }
        if (!company_name) {
          uni.showToast({
            icon: 'none',
            title: '请填写公司名称'
          })
          return;
        }
        if (!credit_code) {
          uni.showToast({
            icon: 'none',
            title: '统一社会信用代码'
          })
          return;
        }
        if (!legal_card_a) {
          uni.showToast({
            icon: 'none',
            title: '请上传法人身份证人像页'
          })
          return;
        }
        if (!legal_card_b) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证国徽页'
          })
          return;
        }
        if (!license_pic) {
          uni.showToast({
            icon: 'none',
            title: '公司营业执照'
          })
          return;
        }
        if (!store_pic) {
          uni.showToast({
            icon: 'none',
            title: '店铺实体照片'
          })
          return;
        }
        // if (!certificate_pic) {
        //   uni.showToast({
        //     icon: 'none',
        //     title: '资质证书/许可证等'
        //   })
        //   return;
        // }

        let params = {
          legal_person,
          legal_phone,
          default: cityName,
          legal_card_a,
          legal_card_b,
          license_pic,
          store_pic,
          certificate_pic,
          type: 1, // 0个人 1企业
          sign_type: this.type, // 转租是0 新租售是1
          credit_code,
          company_name,
          resource_id:  this.orderId
        }

        authSign(params).then(res => {
          if (res.status == 200) {
            uni.showToast({
              icon: 'none',
              title: '提交成功',
              success: () => {
                // this.isAuth = true
                if(this.type==1){
                  this.id = res.data.id
                }
               this.viewContract()
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        }).catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
      },
      getCityList: function() {
        let that = this;
        getCity().then(res => {
          this.district = res.data
          that.initialize();
        })
      },
      initialize() {
        let that = this,
          province = [],
          city = [],
          area = [];
        let cityChildren = that.district[0].c || [];
        let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
        that.district.forEach((item, i) => {
          province.push(item.n);
          if (item.n === this.region[0]) {
            this.valueRegion[0] = i
            this.multiIndex[0] = i
          }
        });
        that.district[this.valueRegion[0]].c.forEach((item, i) => {
          if (this.region[1] == item.c) {
            this.valueRegion[1] = i
            this.multiIndex[1] = i
          }
          city.push(item.n);
        });
        that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
          if (this.region[2] == item.c) {
            this.valueRegion[2] = i
            this.multiIndex[2] = i
          }
          area.push(item.n);
        });
        this.multiArray = [province, city, area]
      },
      bindRegionChange: function(e) {
        let multiIndex = this.multiIndex,
          province = this.district[multiIndex[0]] || {
            c: []
          },
          city = province.c[multiIndex[1]] || {
            v: 0
          },
          multiArray = this.multiArray,
          value = e.detail.value;

        this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
        // this.$set(this.region,0,multiArray[0][value[0]]);
        // this.$set(this.region,1,multiArray[1][value[1]]);
        // this.$set(this.region,2,multiArray[2][value[2]]);
        this.cityId = city.v
        this.cityName = `${this.region[0]}，${this.region[1]}，${this.region[2]}`
        this.valueRegion = [0, 0, 0]
        this.initialize();
      },
      bindMultiPickerColumnChange: function(e) {
        let that = this,
          column = e.detail.column,
          value = e.detail.value,
          currentCity = this.district[value] || {
            c: []
          },
          multiArray = that.multiArray,
          multiIndex = that.multiIndex;
        multiIndex[column] = value;
        switch (column) {
          case 0:
            let areaList = currentCity.c[0] || {
              c: []
            };
            multiArray[1] = currentCity.c.map((item) => {
              return item.n;
            });
            multiArray[2] = areaList.c.map((item) => {
              return item.n;
            });
            break;
          case 1:
            let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
            multiArray[2] = cityList.map((item) => {
              return item.n;
            });
            break;
          case 2:

            break;
        }
        // #ifdef MP || APP-PLUS
        this.$set(this.multiArray, 0, multiArray[0]);
        this.$set(this.multiArray, 1, multiArray[1]);
        this.$set(this.multiArray, 2, multiArray[2]);
        // #endif
        // #ifdef H5 
        this.multiArray = multiArray;
        // #endif
        this.multiIndex = multiIndex
        // this.setData({ multiArray: multiArray, multiIndex: multiIndex});
      },
    }
  }
</script>

<style lang="scss" scoped>
  .top_bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    height: 456rpx;
  }

  .h_96 {
    height: 96rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
    border-bottom: 2rpx solid #E7E7E7;

    &:last-child {
      border-bottom: none;
    }

    .left {
      .name {
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #111e36;
      }

      .card-no {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .c_fff {
    color: #FFFFFF;
  }

  .btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 8rpx;
    z-index: 10;
  }

  .f_s_18 {
    font-size: 36rpx;
  }

  .felx_c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .black_bold {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #111E36;
    line-height: 38rpx;
    margin-bottom: 24rpx;
  }

  .gray_sub {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
    line-height: 33rpx;
    margin-bottom: 28rpx;
  }

  .hire_page {
    box-sizing: border-box;
    position: relative;
    min-height: 101vh;
    background: #F8F9FC;
    color: rgba(0, 0, 0, 0.9);

    .formItem {
      box-sizing: content-box;
      padding: 14rpx 0;
    }

    .container-t {
      position: relative;
      z-index: 2;

      .container_top {
        margin: 32rpx 26rpx 36rpx 32rpx;

        .hire_liucheng {
          width: 100%;
          height: 130rpx;
          left: 0;
          top: 0;
        }
      }



    }

    .container {
      padding: 32rpx;
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFF;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      padding: 32rpx 28rpx;
      border-radius: 10rpx;
      margin-bottom: 24rpx;
    }

    .multi-item {
      width: 686rpx;
      padding: 32rpx 28rpx;
      margin-bottom: 24rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      .multi-text-child {
        .title {
          margin-bottom: 24rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #111E36;
        }

        .desc {
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.6);
        }
      }

      .multi-item-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 0;

        .content {
          display: flex;
          align-items: center;
          text-align: right;

          .text {
            margin-right: 10rpx;
            font-size: 28rpx;
            color: #333;
            text-align: right;
          }

          .picker-inner {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .auth-item-box {
      padding: 40rpx 24rpx;

      .title {
        margin-bottom: 20rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
      }

      .desc {
        font-size: 28rpx;
        color: #666666;
      }

      .auth-img1 {
        width: 582rpx;
        height: 396rpx;
        display: block;
        margin: 70rpx auto 80rpx;
      }

      .auth-img2 {
        width: 582rpx;
        height: 396rpx;
        display: block;
        margin: 40rpx auto 0;
      }

      .auth-img3 {
        width: 526rpx;
        height: 340rpx;
        display: block;
        margin: 40rpx auto 0;
      }
    }

    .operate-box {
      width: 686rpx;
      height: 96rpx;
      line-height: 96rpx;
      margin: 0rpx auto 30rpx;
      box-sizing: border-box;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #008DFF;
      text-align: center;
      border-radius: 12rpx;
    }

  }
</style>